<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
      <el-card class="box-card">
        <div
          slot="header"
          class="clearfix"
        >
          <el-page-header
            class="title-row"
            content="详情"
            @back="goCenter"
          />
          <br>
        </div>
        <el-row>
          <el-col
            v-if="detailData.queryType=='QUERY'||detailData.queryType=='DDL'||detailData.queryType=='DML'"
            :span="12"
          >
            <div style="font-size:18px;font-weight:bold">查询计划</div>
            <div style="whiteSpace:pre-wrap;width:100%;word-wrap:break-word;word-break:break-all">
              {{ queryProject }}
            </div>
          </el-col>
          <el-col :span="12">
            <div style="font-size:18px;font-weight:bold">查询信息</div>
            <ul v-if="detailData.queryType=='QUERY'||detailData.queryType=='DDL'||detailData.queryType=='DML'">
              <!-- <li>同类语句并发数:<span class="dataValue">{{ concurrency }}</span></li> -->
              <li>查询 ID:<span class="dataValue">{{ detailData.queryId }}</span></li>
              <li>查询语句:<span class="dataValue">{{ detailData.statement }}</span></li>
              <li>用户: <span class="dataValue">{{ detailData.user }}</span></li>
              <li>数据库: <span class="dataValue">{{ detailData.database }}</span></li>
              <li>Coordinator:<span class="dataValue">{{ detailData.coordinatorHostId }}</span></li>
              <li>查询类型: <span class="dataValue">{{ detailData.queryType }}</span></li>
              <li>查询状态: <span class="dataValue">{{ detailData.queryState }}</span></li>
              <li>开始时间: <span class="dataValue">{{ detailData.startTime }}</span></li>
              <li>结束时间: <span class="dataValue">{{ detailData.endTime }}</span></li>
              <li>持续时间: <span class="dataValue">{{ detailData.queryDuration+'ms' }}</span></li>
              <li>生成的行: <span class="dataValue">{{ detailData.rowsProduced }}</span></li>
              <li>HDFS 平均扫描范围: <span class="dataValue">{{ detail.hdfs_average_scan_range }}</span></li>
              <li>HDFS 扫描仪平均读取吞吐量: <span class="dataValue">{{ detail.hdfs_scanner_average_byte }}</span></li>
              <li>Impala 版本: <span class="dataValue">{{ detail.impala_version }}</span></li>
              <li>Number of Backends: <span class="dataValue">{{ detail.number_of_backends }}</span></li>
              <li>Number of Query Fragments Instances: <span class="dataValue">{{ detail.number_of_query_fragments_instances }}</span></li>
              <li>Statistics Corrupt: <span class="dataValue">{{ detail.stats_corrupt }}</span></li>
              <li>从缓存读取的 HDFS 字节: <span class="dataValue">{{ detail.hdfs_bytes_read_from_cache }}</span></li>
              <li>从缓存读取的 HDFS 字节百分比: <span class="dataValue">{{ detail.hdfs_bytes_read_from_cache_percentage }}</span></li>
              <li>会话 ID: <span class="dataValue">{{ detail.session_id }}</span></li>
              <li>会话类型: <span class="dataValue">{{ detail.session_type }}</span></li>
              <li>具有内存使用峰值的节点: <span class="dataValue">{{ detail.memory_per_node_peak_node }}</span></li>
              <li>内存不足: <span class="dataValue">{{ detail.oom }}</span></li>
              <li>客户端获取等待时间: <span class="dataValue">{{ detail.client_fetch_wait_time+'ms' }}</span></li>
              <li>客户端获取等待时间百分比: <span class="dataValue">{{ detail.client_fetch_wait_time_percentage }}</span></li>
              <li>已溢出内存: <span class="dataValue">{{ detail.memory_spilled }}</span></li>
              <li>已读取的 HDFS Short Circuit 字节百分比: <span class="dataValue">{{ detail.hdfs_bytes_read_short_cicuit_percentage }}</span></li>
              <li>已读取的 HDFS 本地字节: <span class="dataValue">{{ detail.hdfs_bytes_read_local }}</span></li>
              <li>已读取的 HDFS 本地字节百分比: <span class="dataValue">{{ detail.hdfs_bytes_read_local_percentage }}</span></li>
              <li>应计内存: <span class="dataValue">{{ detail.memory_accrual }}</span></li>
              <li>文件格式:<span class="dataValue">{{ detail.file_formats }}</span></li>
              <li>查询状态: <span class="dataValue">{{ detail.query_status }}</span></li>
              <li>每个节点的估计内存峰值: <span class="dataValue">{{ detail.estimated_per_node_peak_memory+'字节' }}</span></li>
              <li>每个节点的内存使用峰值: <span class="dataValue">{{ detail.memory_per_node_peak+'字节' }}</span></li>
              <li>池: <span class="dataValue">{{ detail.pool }}</span></li>
              <li>累积内存使用峰值: <span class="dataValue">{{ detail.memory_aggregate_peak+'字节' }}</span></li>
              <li>线程：CPU 时间: <span class="dataValue">{{ detail.thread_cpu_time+'ms' }}</span></li>
              <li>线程：CPU 时间百分比: <span class="dataValue">{{ detail.thread_cpu_time_percentage }}</span></li>
              <li>线程：存储等待时间: <span class="dataValue">{{ detail.thread_storage_wait_time+'ms' }}</span></li>
              <li>线程：存储等待时间百分比: <span class="dataValue">{{ detail.thread_storage_wait_time_percentage }}</span></li>
              <li>线程：总时间: <span class="dataValue">{{ detail.thread_total_time+'ms' }}</span></li>
              <li>线程：网络发送等待时间: <span class="dataValue">{{ detail.thread_network_send_wait_time+'ms' }}</span></li>
              <li>线程：网络发送等待时间百分比: <span class="dataValue">{{ detail.thread_network_send_wait_time_percentage }}</span></li>
              <li>线程：网络接收等待时间: <span class="dataValue">{{ detail.thread_network_receive_wait_time+'ms' }}</span></li>
              <li>线程：网络接收等待时间百分比: <span class="dataValue">{{ detail.thread_network_receive_wait_time_percentage }}</span></li>
              <li>缺少统计数据: <span class="dataValue">{{ detail.stats_missing }}</span></li>
              <li>网络地址: <span class="dataValue">{{ detail.network_address }}</span></li>
              <li>规划等待时间: <span class="dataValue">{{ detail.planning_wait_time+'ms' }}</span></li>
              <li>规划等待时间百分比: <span class="dataValue">{{ detail.planning_wait_time_percentage }}</span></li>
              <li>许可等待时间: <span class="dataValue">{{ detail.admission_wait+'ms' }}</span></li>
              <li>许可结果: <span class="dataValue">{{ detail.admission_result }}</span></li>
              <li>读取的 HDFS Short Circuit 字节: <span class="dataValue">{{ detail.hdfs_bytes_read_short_circuit }}</span></li>
              <li>读取的 HDFS 字节: <span class="dataValue">{{ detail.hdfs_bytes_read }}</span></li>
              <li>读取的 HDFS 远程字节: <span class="dataValue">{{ detail.hdfs_bytes_read_remote }}</span></li>
              <li>读取的 HDFS 远程字节百分比: <span class="dataValue">{{ detail.hdfs_bytes_read_remote_percentage }}</span></li>
              <li>连接用户: <span class="dataValue">{{ detail.connected_user }}</span></li>
            </ul>
            <ul v-if="detailData.applicationType=='MAPREDUCE'">
              <!-- <li>同类语句并发数:<span class="dataValue">{{ concurrency }}</span></li> -->
              <li>查询语句:<span class="dataValue">{{ detailData.name }}</span></li>
              <li>写入文件字节:<span class="dataValue">{{ detail.file_bytes_written }}</span></li>
              <li>总任务:<span class="dataValue">{{ detail.total_launched_tasks }}</span></li>
              <li>CPU分配:<span class="dataValue">{{ detail.vcores_millis }}</span></li>
              <li>时隙:<span class="dataValue">{{ detail.slots_millis }}</span></li>
              <li>读取的文件字节:<span class="dataValue">{{ detail.file_bytes_read }}</span></li>
              <li>本地机架 Maps 百分比:<span class="dataValue">{{ detail.rack_local_maps_percentage }}</span></li>
              <li>Reduce 已完成:<span class="dataValue">{{ detail.reduces_completed }}</span></li>
              <li>CPU 时间:<span class="dataValue">{{ detail.cpu_milliseconds }}</span></li>
              <li>溢出的记录:<span class="dataValue">{{ detail.spilled_records }}</span></li>
              <li>Maps 总计:<span class="dataValue">{{ detail.maps_total }}</span></li>
              <li>HDFS 读取操作:<span class="dataValue">{{ detail.hdfs_read_ops }}</span></li>
              <li>输入目录:<span class="dataValue">{{ detail.input_dir }}</span></li>
              <li>Map 时隙:<span class="dataValue">{{ detail.slots_millis_maps }}</span></li>
              <li>写入的 HDFS 字节:<span class="dataValue">{{ detail.hdfs_bytes_written }}</span></li>
              <li>HDFS 写入操作:<span class="dataValue">{{ detail.hdfs_write_ops }}</span></li>
              <li>虚拟内存:<span class="dataValue">{{ detail.virtual_memory_bytes }}</span></li>
              <li>本地机架 Maps:<span class="dataValue">{{ detail.rack_local_maps }}</span></li>
              <li>大型文件读取操作:<span class="dataValue">{{ detail.file_large_read_ops }}</span></li>
              <li>启动的 Map 任务:<span class="dataValue">{{ detail.total_launched_maps }}</span></li>
              <li>Map 输入记录:<span class="dataValue">{{ detail.map_input_records }}</span></li>
              <li>输入拆分字节:<span class="dataValue">{{ detail.split_raw_bytes }}</span></li>
              <li>读取的 HDFS 字节:<span class="dataValue">{{ detail.hdfs_bytes_read }}</span></li>
              <li>Maps 已完成:<span class="dataValue">{{ detail.maps_completed }}</span></li>
              <li>Map CPU 分配:<span class="dataValue">{{ detail.vcores_millis_maps }}</span></li>
              <li>Reduces 总计:<span class="dataValue">{{ detail.reduces_total }}</span></li>
              <li>大型 HDFS 读取操作:<span class="dataValue">{{ detail.hdfs_large_read_ops }}</span></li>
              <li>Reduce 类:<span class="dataValue">{{ detail.reducer_class }}</span></li>
              <li>Hive 查询 ID:<span class="dataValue">{{ detail.hive_query_id }}</span></li>
              <li>Map 内存分配:<span class="dataValue">{{ detail.mb_millis_maps }}</span></li>
              <li>Map 输出记录:<span class="dataValue">{{ detail.map_output_records }}</span></li>
              <li>提交的堆:<span class="dataValue">{{ detail.committed_heap_bytes }}</span></li>
              <li>物理内存:<span class="dataValue">{{ detail.physical_memory_bytes }}</span></li>
              <li>写入的字节:<span class="dataValue">{{ detail.bytes_written }}</span></li>
              <li>失败的洗牌:<span class="dataValue">{{ detail.failed_shuffle }}</span></li>
              <li>文件读取操作:<span class="dataValue">{{ detail.file_read_ops }}</span></li>
              <li>合并的 Map 输出:<span class="dataValue">{{ detail.merged_map_outputs }}</span></li>
              <li>读取的字节:<span class="dataValue">{{ detail.bytes_read }}</span></li>
              <li>Garbage Collection 时间:<span class="dataValue">{{ detail.gc_time_millis }}</span></li>
              <li>内存分配:<span class="dataValue">{{ detail.mb_millis }}</span></li>
              <li>文件写入操作:<span class="dataValue">{{ detail.file_write_ops }}</span></li>
              <li>Hive 查询字符串:<span class="dataValue">{{ detail.hive_query_string }}</span></li>
              <li>工作 CPU 时间:<span class="dataValue">{{ detail.cm_cpu_milliseconds }}</span></li>
            </ul>
            <ul v-if="detailData.applicationType=='SPARK'||detailData.applicationType=='Apache Flink'">
              <li>查询语句:<span class="dataValue">{{ detailData.name }}</span></li>
              <li>用户:<span class="dataValue">{{ detailData.user }}</span></li>
              <li>模型名称:<span class="dataValue">{{ detailData.modelName }}</span></li>
              <li>ID:<span class="dataValue">{{ detailData.applicationId }}</span></li>
              <li>查询类型:<span class="dataValue">{{ detailData.applicationType }}</span></li>
              <li>持续时间:<span class="dataValue">{{ detailData.elapsedTime }}</span></li>
              <li>已分配VCore的秒数:<span class="dataValue">{{ detailData.allocatedVcoreSeconds }}</span></li>
              <li>已分配内存的秒数:<span class="dataValue">{{ detailData.allocatedMemorySeconds }}</span></li>
              <li>已分配VCore数:<span class="dataValue">{{ detail.allocatedVCores }}</span></li>
              <li>已分配的内存:<span class="dataValue">{{ detail.allocatedMB }}</span></li>
              <li>正在运行的容器数:<span class="dataValue">{{ detail.runningContainers }}</span></li>
              <li>进度:<span class="dataValue">{{ detail.progress }}</span></li>
            </ul>
          </el-col>
        </el-row>
          
      </el-card>
    </div>
  </div>
</template>
<script>
import audit from '@/api/phaseTwo/audit.js'
export default {
  props: ['detailData'],
  data() {
    return {
      detail: {},
      queryProject: '',
      concurrency: ''
    }
  },
  created() {
    this.detail = JSON.parse(this.detailData.otherParameterData) 
    // if (this.detailData.applicationType === 'MAPREDUCE') {
    //   this.getMapreduceConcurrency()
    // } else
    // if (this.detailData.queryType === 'QUERY' || this.detailData.queryType === 'DDL' || this.detailData.queryType === 'DML') {
    //   this.getImpalaConcurrency()
    //   this.getImpalaProfile()
    // }
  },
  methods: {
    goCenter() {
      this.$emit('server', false)
    },
    getImpalaProfile() {
      const formData = new FormData()
      formData.append('cmFlag', this.detailData.cmFlag)
      formData.append('clusterFlag', this.detailData.clusterFlag)
      formData.append('queryId', this.detailData.queryId)
      audit.impalaProfile(formData).then((res) => {
        // let str=res.replace(//g,'')
        this.queryProject = res
      })
    },
    getImpalaConcurrency() {
      const formData = new FormData()
      formData.append('queryType', this.detailData.queryType)
      formData.append('tableInfo', this.detail.tableInfo)
      formData.append('createTime', this.detailData.createTime)
      audit.impalaConcurrency(formData).then((res) => {
        this.concurrency = res
      })
    },
    getMapreduceConcurrency() {
      const formData = new FormData()
      formData.append('tableInfo', this.detail.tableInfo)
      formData.append('createTime', this.detailData.createTime)
      audit.mapreduceConcurrency(formData).then((res) => {
        this.concurrency = res
      })
    }
  }
}
</script>
<style scoped>
.box {
  width: 100%;
  height: 40px;
  display: flex;
  border-left: 1px solid #e9e9e9;
  border-top: 1px solid #e9e9e9;
}
.content1 {
  width: 40%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fafafa;
  border-right: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  color: #333;
  font-size: 14px;
}
.content2 {
  width: 60%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background-color: #fff;
  border-bottom: 1px solid #e9e9e9;
  color: #b0b0b2;
  font-size: 14px;
  white-space: nowrap;
  word-break: break-all;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  overflow: hidden;
}
.main{
  margin-top:5px;
  border:1px solid #dedede;
  box-shadow: 2px 1px 7px 1px #cdcdd1;
}
.title{
  font-size: 14px;
  text-align: center;
  margin-top:10px;
}
ul li{
  font-size:14px;
  list-style:none;
}
li .dataValue{
  font-weight: bold;
  font-size: 14px;
}
</style>
